<template>
	<div class="view-my" style="width: 95%;    margin: 20px;">
		<div class="title">牙位组件样例</div>
		<div class="mx-1">1.点击十字花，打开牙位组件，选择牙位信息后，反显示在十字花上；</div>
		<div class="mx-1">2.若十字花上有数据，点击十字花则数据加载再对应牙位信息上；</div>
		<div class="mx-1">3.点击关闭按钮，取消页面均不会保存数据，只有点击确定才会保存数据；</div>
		<div class="mx-1" style="margin-top: 10px;">4.
		<a-button  @click="queryAllData" type="primary">获取所有牙位组件数据</a-button>
		获取数据内容：<text class="mx-1" id="allList" />
		</div>
		<div class="mx-1" style="margin-top: 10px;">5.页面加载直接给传参牙位赋值数据内容：
		业务关联ID：<text class="mx-1" id="testAddDataId">Jn00998</text>
		牙位数据：<text class="mx-1" id="testAddData">{"LTBox":"8,7,6,5,4,3,2,1","LBBox":"8,7,6,5,4,3,2,1","RTBox":"1,2,3,4,5,6,7,8","RBBox":"1,2,3,4,5,6,7,8"}</text>
		</div>
		<div class="mx-1" style="margin-top: 10px;">6.
		<a-button  @click="putData2" type="primary">动态传参牙位组件赋数据</a-button>
		点击按钮赋值数据内容：
		业务关联ID：<text class="mx-1" id="testAddDataId2">buttonTest</text>
		牙位数据：<text class="mx-1" id="testAddData2">{"LTBox":"8,7,6,5,4,3,1","LBBox":"8,7,6,4,3,2,1","RTBox":"1,3,4,5,6,7,8","RBBox":"1,2,3,5,6,7,8"}</text>
		</div>
 <a-layout theme="light" style="margin-top: 20px;">
	  <a-layout-sider width="160px" theme="light">
			  <!-- 牙位组件插入 -->
			  <TOOTH toothJsonData=""  bizId="test1"/>
		  </a-layout-sider>
	      <a-layout-content theme="light">
			   <a-form-item label="主诊断">
			        <a-textarea />
			      </a-form-item>
		  </a-layout-content>
	    </a-layout>
 <a-layout theme="light">
	  <a-layout-sider width="160px" theme="light" >
			  <!-- 牙位组件插入 -->
			  <TOOTH toothJsonData=""  bizId="test2"/>
		  </a-layout-sider>
	      <a-layout-content theme="light">
			   <a-form-item label="其他诊断">
			        <a-textarea />
			      </a-form-item>
		  </a-layout-content>
	    </a-layout>
		 <a-layout theme="light">
		<a-layout-sider width="160px" theme="light">
					  <!-- 牙位组件插入 -->
					  <TOOTH  toothJsonData="" bizId="test3"/>
				  </a-layout-sider>
		    <a-layout-content theme="light">
					   <a-form-item label="口腔">
					        <a-textarea />
					      </a-form-item>
				  </a-layout-content>
		  </a-layout>
		  <a-layout theme="light">
		  <a-layout-sider width="160px" theme="light">
		  			  <!-- 牙位组件插入 -->
		  			  <TOOTH ref="paramTesttoothStatic" toothJsonData="toothJsonData" bizId="bizId" />
		  		  </a-layout-sider>
		      <a-layout-content theme="light">
		  			   <a-form-item label="传参数牙位">
		  			        <a-textarea />
		  			      </a-form-item>
		  		  </a-layout-content>
		    </a-layout>
			<a-layout theme="light">
			<a-layout-sider width="160px" theme="light">
						  <!-- 牙位组件插入 -->
						  <TOOTH ref="paramTesttooth" toothJsonData="" bizId="" />
					  </a-layout-sider>
			    <a-layout-content theme="light">
						   <a-form-item label="动态传参数牙位">
						        <a-textarea />
						      </a-form-item>
					  </a-layout-content>
			  </a-layout>
	</div>

</template>
<script lang="ts"  setup>
// 	import $ from 'jquery';
import {  ref} from "vue";
 // 导入组件
import TOOTH from './tooth.vue';
const paramTesttooth=ref();//获取动态传参牙位组件
const paramTesttoothStatic=ref();//静态加载传参牙位组件

let toothJsonData=ref("");
let bizId=ref("");

// 确保在文档加载完成后执行此代码
document.addEventListener('DOMContentLoaded', () => {
  	putData();
})

 //获取所有牙位数据
function queryAllData():void{
	 let data=[];
 	document.querySelectorAll("[id^='TextTooth_']").forEach(function(i_key, i_index) {
		data.push({"bizId":i_key.dataset.bizId,"tooth":i_key.dataset.tooth});
	});
	document.querySelector("#allList").textContent=JSON.stringify(data);
}
//给牙位组件传参
function putData():void{
 // toothJsonData.value=document.querySelector("#testAddData").textContent;
 // bizId.value=document.querySelector("#testAddDataId").textContent;
paramTesttoothStatic.value.changeData(document.querySelector("#testAddData").textContent,document.querySelector("#testAddDataId").textContent);
}
function putData2():void{
paramTesttooth.value.changeData(document.querySelector("#testAddData2").textContent,document.querySelector("#testAddDataId2").textContent);
}

</script>

<style >

</style>
